<mat-sidenav-container>
  <mat-sidenav 
    #sidenav
    class="cne-sidenav mat-elevation-z2"
    mode="side" 
    opened="true"
    [class.collapsed]="collapsedState()">
    
    <header class="cne-nav-header">
      <mat-toolbar color="primary" class="cne-nav-header-toolbar">
        <div class="flex flex-auto items-center ">
          <img src="/assets/logo-white.svg" alt="Logo" class="cne-logo-title" />
          <span>Cne Admin</span>
        </div>
      </mat-toolbar>
    </header>

    <mat-toolbar color="primary" class="cne-side-menu-toolbar flex flex-1 flex-col" role="navigation">
      <cne-side-menu></cne-side-menu>
    </mat-toolbar>
  </mat-sidenav>

  <mat-sidenav-content>
    <div class="flex flex-col main-content" role="main">
        <!-- Header 区域 -->
      <cne-header 
        [sidebarCollapsed]="collapsedState()"
        (sidebarToggle)="toggleCollapsed()">
      </cne-header>
      @if (isLoading$ | async) {
        <mat-progress-bar 
          color="primary" 
          class="loading-bar" 
          mode="indeterminate">
        </mat-progress-bar>
      }
      <div class="cne-main-content flex flex-1 flex-col">
        <!-- 主内容区域 -->
        <router-outlet></router-outlet>
      </div>
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>